/*
 * add address
**/
<template>
<div class="mod-items">
	<div class="weui-panel">
        <p class="p-title">添加新文字</p>
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">收货人</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="姓名" maxlength="5" v-model="consignee">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" placeholder="收货人手机号" maxlength="11" v-model="mobile">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">所在地区</label></div>
            <div class="weui-cell__bd">
                <picker @get-val="addressPick" :location="locat"></picker>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label for="" class="weui-label">详细地址</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="街道门牌信息" v-model="address">
            </div>
        </div>
    </div>
    <div class="footer">
    	<div class="btn-box">
    		<a class="back" @click="back">返回</a>
    		<a class="sub" @click="sub">提交</a>
    	</div>
    </div>
</div>
</template>
<script>
import picker from 'src/page/pay/picker'
import {updateAddress} from 'src/service/getData'
export default {
  data () {
    return {
      address_id: '',
      consignee: '',
      address: '',
      mobile: '',
      nameArr: [],
      codeArr: [],
      locat: {
        id: '',
        name: ''
      }
    }
  },
  components: {
    picker
  },
  mounted () {
  },
  methods: {
    initData (param) {
      this.address_id = param.address_id
      this.consignee = param.consignee
      this.address = param.address
      this.mobile = param.mobile
      this.nameArr = [param.province_name, param.city_name, param.district_name]
      this.codeArr = [param.province, param.city, param.district]
      this.locat = {
        id: param.province + ' ' + param.city + ' ' + param.district,
        name: param.province_name + ' ' + param.city_name + ' ' + param.district_name
      }
    },
    back () {
      this.clear()
      this.$emit('refreshAdd', {})
    },
    addressPick (name, code) {
      this.nameArr = name.split(' ')
      this.codeArr = code.split(' ')
    },
    async sub () {
      if (this.consignee.replace(/^\s*/, '') === '') {
        alert('姓名没填写')
        return
      } else if (!(/^1[3|4|5|7|8|9][0-9]\d{8}$/.test(this.mobile))) {
        alert('手机填写有误')
        return
      } else if (this.nameArr.length === 0) {
        alert('请选择地区')
        return
      } else if (this.address.replace(/^\s*/, '') === '') {
        alert('详细地址没填写')
        return
      }
      let res = await updateAddress(this.address_id, this.consignee, this.codeArr[0], this.nameArr[0], this.codeArr[1], this.nameArr[1], this.codeArr[2], this.nameArr[2], this.address, this.mobile)
      console.log(res)
      let oJson = {
        'address_id': this.address_id,
        'consignee': this.consignee,
        'province': this.codeArr[0],
        'province_name': this.nameArr[0],
        'city': this.codeArr[1],
        'city_name': this.nameArr[1],
        'district': this.codeArr[2],
        'district_name': this.nameArr[2],
        'address': this.address,
        'mobile': this.mobile
      }
      this.clear()
      this.$emit('refreshAdd', oJson)
    },
    clear () {
      this.address_id = ''
      this.consignee = ''
      this.address = ''
      this.mobile = ''
      this.nameArr = []
      this.codeArr = []
      this.locat = {'id': '', 'name': ''}
    }
  }
}
</script>
<style scoped>
  .p-title{font-size:18px;color: #333;line-height: 0.4rem;text-align: center;}
  .weui-label{color: #333;}
  .footer{position: absolute; width: 100%; padding-bottom: 0.25rem; bottom: 0;}
  .btn-box{margin: 0 auto; width: 3rem;}
  .btn-box a{display: inline-block; font-size: 0.14rem; background: #ffa200; color: #fff; line-height: 0.35rem; padding: 0 0.42rem; border-radius: 22px; margin: 0 0.17rem;}
  .btn-box .sub{background: #ff602a;}
  .mod-items{margin: 0rem !important; background: #efeff4; position: absolute; top: 0; left: 0; overflow-y: auto; bottom: 0; right: 0;z-index:999;}
  @media screen and (max-height: 400px) {
	.footer{display: none;}
  }
</style>
